<table id="released_subject_table" class="layui-hide" lay-filter="released_subject_table"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">已选学生</a>
</script>

<script type="text/javascript" src="/static/js/ajax.js"></script>
<script>
    layui.use(['table','layer'], function(){
        var  table = layui.table, layer=layui.layer;
        table.render({
            elem: '#released_subject_table'
            ,url:'/api/v1/teacher/titles'
            ,method:'GET'
            ,toolbar: 'default'
            ,id:'optional_teacher_table'
            ,defaultToolbar: []
            ,parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code,   //解析接口状态
                    "msg": res.msg,     //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list    //解析数据列表
                };
            }
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{width:80, title: '序号',type:'numbers'}
                ,{field:'id', width:80, title: '序号', sort: true,hide:true}
                ,{field:'titleName', width:360, title: '题目名称'}
                ,{width:130, title: '所属专业', sort: true,
                    templet:function(d){
                        return d.major.majorName}
                }
                ,{field:'totalCount', width:88, title: '可选人数'}
                ,{field:'selectCount', title: '已选人数', width:88}
                ,{field:'releaseTime', width:120, title: '发布时间', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:161}
            ]]
            ,page: true
        });

        // 教师添加可选题目
        function add_subject(){
            // 创建一个iframe层
            layer.open({
                type: 2,
                title:'新增可选题目',
                area: ['400px', '300px'],
                content: '/static/page/teacher/add_title.html',
                end:function (){
                    table.reload('optional_teacher_table')
                }
            });
        }

        // 教师删除某些可选题目
        function del_subject(array){
            if(array.length==0){
                layer.msg("请至少选择一条数据")
            } else{
                layer.confirm('确定删除选择的题目吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(index, layero){
                    var str='';
                    for(let i=0;i<array.length;i++){
                        if(i==0){
                            str=str+array[i].id;
                        }else{
                            str=str+","+array[i].id;
                        }
                    }
                    postAJAX("DELETE","/api/v1/teacher/titles/"+str,null,null,(data)=>{
                        if(data.code==0 && data.msg=='success'){
                            // 需要手动关闭弹出层
                            layer.msg("删除成功");
                            layer.close(index);
                            table.reload('optional_teacher_table')
                        }
                    });
                }, function(){

                });
            }
        }

        // 教师编辑某个可选题目
        function edit_subject(array){
            if(array.length==0){
                layer.msg("请至少选择一行进行编辑");
            } else if(array.length>1){
                layer.msg("只能选择一行进行编辑");
            } else{
                layer.open({
                    type: 2,
                    title:'编辑可选题目',
                    area: ['400px', '300px'],
                    content: '/static/page/teacher/add_title.html',
                    success: function(layero, index){
                        postAJAX("GET","/api/v1/teacher/title/"+array[0].id,null,null,(data)=>{
                            // 编辑时内容的填充
                            var body = layer.getChildFrame('body', index);
                            var input_array=body.find('input');
                            input_array[0].value=array[0].id;
                            input_array[1].value=data.data.titleName;
                            input_array[2].value=data.data.major.majorName;
                            input_array[3].value=data.data.totalCount;
                            $(body.find('textarea')[0]).html(data.data.titleDetail);
                            // 改变按钮的显示与隐藏
                            var button_array=body.find('button');
                            button_array[0].style="display:none";
                            button_array[1].style="display:block";
                        });
                    },
                    end:function (){
                        table.reload('optional_teacher_table')
                    }

                })
            }
        }

        // 查看某个可选题目的详情
        function get_title_detail(id){
            layer.open({
                type: 2,
                title:'可选题目详情',
                area: ['672px', '347px'],
                content: '/static/page/teacher/title_detail.html',
                shadeClose: true,
                success: function(layero, index){
                    postAJAX("GET","/api/v1/teacher/title/"+id,null,null,(data)=>{
                        // 详情页内容填充,与编辑时基本相同
                        var body = layer.getChildFrame('body', index);
                        var input_array=body.find('input');
                        input_array[0].value=data.data.titleName;
                        input_array[1].value=data.data.major.majorName;
                        input_array[2].value=data.data.totalCount;
                        input_array[3].value=data.data.releaseTime;
                        input_array[4].value=data.data.updateTime;
                        $(body.find('textarea')[0]).html(data.data.titleDetail);
                    });
                }
            })
        }


        // 查看选择某个题目的全部学生
        function get_select_student(id){
            let body=document.getElementById("layui-body");
            $.get('/static/page/teacher/select_student.html',null,(res)=>{
                let Obj = $("<code></code>").append($(res));
                $("#titleId", Obj).attr("value",id);
                $(body).html(Obj);
            });
        }

        // 监听头部工具栏,toolbar中放置的是table的lay-filter属性值
        table.on('toolbar(released_subject_table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    add_subject();
                    break;
                case 'delete':
                    del_subject(checkStatus.data);
                    break;
                case 'update':
                    edit_subject(checkStatus.data);
                    break;
            }
        });

        // 监听每一行的工具条
        table.on('tool(released_subject_table)', function(obj){
            let data = obj.data;
            let layEvent = obj.event;
            if(layEvent === 'detail'){
                get_title_detail(data.id);
            } else if(layEvent === 'edit'){
               get_select_student(data.id);
            }
        });
    });
</script>